 <template>
 <div>
   <el-card>
  <el-table :data="tableData" style="width: 90%;" align="center"  v-loading="loading">
    <el-table-column label="序号" type="index" align="center" width="100">  </el-table-column>
    <el-table-column prop="name"  label="定时任务名称" sortable align="center"></el-table-column>
    <el-table-column  prop="doTime" label="执行时间" sortable align="center"></el-table-column>
    <el-table-column prop="remark" label="说明"  sortable align="center"></el-table-column>
    <el-table-column align="center" label="操作">
        <template slot-scope="scope">
            <el-button type="primary" size="mini"  @click=" centerDialogVisible = true,handleDtail(scope.$index, scope.row)" >设置</el-button>
        </template>
    </el-table-column>
  </el-table>
  <!-- dialog详情页 -->
   <el-dialog title="设置执行时间" :visible.sync="centerDialogVisible" width="20%" center :close-on-click-modal="false">
     <!-- <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                       设置执行时间
                    </span>
                </div>
      </template>  -->
      
      <el-time-picker v-model="value" format='HH:mm' value-format="HH:mm"  class="dateTime" 
        :picker-options="{selectableRange: '00:00:00 - 23:59:00'}" placeholder="任意时间点">
      </el-time-picker>
    <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="disload">确 定</el-button>
    </span>
</el-dialog>
</el-card>
</div>
</template>
<script>
 import {scheduleJobList,updateById  } from "../../api/setTimeRules";
  export default {
    data() {
      return {
        loading:false,
        tableData: [],//页面列表
        centerDialogVisible: false,
        value: "",
        formData:{},//确定提交的对象
        disload:false,
      }
    },
  
    methods: {
      handleDtail(i,val){
          console.log(i)
          console.log(val)
          this.value= val.doTime
          this.formData.id = val.id
      },
      // 列表数据获取
      scheduleJobList(){
        this.loading = true;
        scheduleJobList()
        .then(data=>{
            // console.log(data) 
            if (data.code != 0) {
                this.$message.error(data.message);
                this.loading = false;
                return false;
            }
            this.tableData=data.data || []
            console.log(this.tableData)
            setTimeout(() => {
             this.loading = false;
            }, 0.3 * 1000);
          })
          .catch(err=>{
             this.loading = false;
              this.tableData =[]
          })
      },
      
      //点击确定存储数据，dialog关闭，刷新页面
      submit(){
        this.centerDialogVisible = false
        this.formData.doTime = this.value//执行时间选好后赋值给formData对象
        // console.log(this.formData)
        this.disload=true
        updateById(this.formData)
        .then(data=>{
          // console.log(data)
          if (data.code != 0) {
            this.$message.error(response.message);
            this.loading = false;
            this.disload=false;
            return false;
          }else {
            this.$message.success("恭喜执行时间设置成功"); 
            this.disload=false;
            this.scheduleJobList();
        }
          setTimeout(() => { this.loading = false; this.disload=false;}, 0.3 * 1000);
        })
        .catch(err=>{
            this.loading = false;   
            this.disload=false; 
        })  
      }

    },
    mounted(){
      this.scheduleJobList()
    }
  }
</script>
<style scoped >
    .el-table{
        font-size:16px;
        position: relative;
        left: 5%;
        right: 5%;  
    };
  
    .el-dialog__body{
        position: relative; 
    }
    .el-date-editor{
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%); 
    } 
 
</style>




